import React, { Component } from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/legendScroll';
import 'echarts/lib/component/tooltip';
import styles from './pie.less';
import PropTypes from 'prop-types';

export default class Pie extends Component {

  static propTypes = {
    unit: PropTypes.string.isRequired,
  }

  constructor(props){
    super(props);
    this.legendData = [
      { name: '行驶' },
      { name: '驻车' },
      { name: '泵送' },
      { name: '转场' },
      { name: '待料' },
    ];
    this.key = {};
  }

  componentDidMount() {
    this.pie = echarts.init(document.getElementById('pie'));
    this.pie.setOption({
      grid: {
        top: 0,
        bottom: 0,
      },
      tooltip: {
        trigger: 'item'
      },
      title : {
        text: '按工作状态分析',
        show: true,
        textStyle: {
          color: 'red',
          fontSize: 16,
          
        }
      },
      legend: {
        type: 'scroll',
        orient: 'vertical',
        right: 0,
        top: 80,
        bottom: 20,
        data: this.legendData,
        formatter: (name, index) => {
          return `${name} ${this.key[name]}${this.props.unit}`;
        }
      },
      series: [
        {
          name: '总油耗',
          type: 'pie',
          radius : [0, 23],
          selectedMode: 'single',
          labelLine: {
            normal: {
                show: false
            }
          },
          center: ['38%', '50%'],
          data: [],
          label: { 
            formatter: (params) => {
              console.log(999, params)
              return `${parseFloat(params.value).toFixed(2)} ${this.props.unit}`
            },
            position: 'center',
            color: '#000',
            fontSize: 15,
          },
          tooltip: {
            formatter: (params) => {
              return `${params.name}：${parseFloat(params.value).toFixed(2)} ${this.props.unit}`
            },
          },
          itemStyle: {
            color: '#fff'
          },
        },
        {
          name: '油耗',
          type: 'pie',
          radius : [23, 83],
          center: ['38%', '50%'],
          data: [],
          tooltip: {
            formatter: `{b}：{c}${this.props.unit} ({d}%)`
          },
          label: { 
            formatter: '{d}%',
            color: '#000',
            fontSize: 15,
          },
          labelLine: {
            length: 0
          }
        }
      ]
    })
  }

  init = (seriesData) => {
    seriesData[1].data.map(data=>{
      this.key[data.name] = data.value
    })
    this.pie.setOption({
      series: seriesData
    })
  }

  render() {
    return (
      <div className={styles.pie}>
        <div className={styles.title}>按工作状态分析</div>
        <div id="pie" className={styles.chart} ></div>
      </div>
      
    )
  }

}